<script setup>
// let myLeaveCount = 1
// let waitingCancelCount = 0
import {ref , onMounted} from'vue'

//计数数据
const myLeaveCount = ref(0)
const waitingCancelCount =ref(0)

//导航到“我的请假”
const navigateToMyLeave = function (){
  uni.navigateTo({
    url:'/pages/myLeave/index'
  })
}

//导航到“待销假”页面
const navigateToWaitingCancel = function (){
  uni.navigateTo({
    url:'/pages/myLeave/index?tab=waitingCancel'
  })
}

//初始化时加载计数
onMounted(()=>{
  updateCounts()
})

//更新计数
const updateCounts = function (){
  //请假记录
  const count = uni.getStorageSync('myLeaveCount') || 0
  myLeaveCount.value = count

  //待销假
  waitingCancelCount.value = count;

}
</script>

<template>
<view class="container">
<!--  功能列表-->
  <view class="function_list">
    <view class="function_item" @click="navigateToMyLeave">
      <view class="function_info">
      <view class="icon_name_container">
        <image class="function_icon" src="/static/image/function_icon1.png" mode="aspectFit"></image>
        <text class="function_name">我的请假</text>
      </view>
        <text class="function_count">{{myLeaveCount}}</text>
      </view>
      <text class="arrow_icon"> > </text>
    </view>

    <view class="function_item" @click="navigateToWaitingCancel">
      <view class="function_info">
        <view class="icon_name_container">
          <image class="function_icon" src="/static/image/function_icon2.png"></image>
          <text class="function_name">待销假</text>
        </view>
        <text class="function_count">{{waitingCancelCount}}</text>
      </view>
      <text class="arrow_icon"> > </text>
    </view>

  </view>
<!--  因为遇到了底部栏遮挡页面的问题，加上了占空间用的view-->
  <view class="placeholder"></view>

</view>
</template>

<style scoped>
.icon_name_container{
  display: flex;
  align-items: center;
}
.container{
  padding-bottom:120px;
  padding-top: 20px;
}
.function_list{
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 30px;
}
.function_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  border-bottom: 1px solid #f0f0f0;
}
.function_info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.function_icon{
  width: 28px;
  height: 28px;
  margin-right: 20px;
}
.arrow_icon{
  font-size: 28rpx;
  color: #999;
}
.placeholder{
  height: 20px;
}
.function_name{
  font-size: 32rpx;
  color: #333;
}
.function_count{
  font-size: 26rpx;
  color: white;
  background-color: #666666;
  padding: 4rpx 16rpx;
  border-radius: 12rpx;
}

</style>